const imgBox = document.querySelector('.imgBox')
const banner = document.querySelector('.banner')
const pointBox = document.querySelector('.pointBox')

let index = 1
const banner_width = banner.clientWidth
let timerId = 0
let flag = true

copyEle()
function copyEle() {
  const first = imgBox.firstElementChild.cloneNode(true)
  const last = imgBox.lastElementChild.cloneNode(true)

  imgBox.appendChild(first)
  imgBox.insertBefore(last, imgBox.firstElementChild)

  imgBox.style.width = imgBox.children.length * 100 + '%'
  imgBox.style.left = -index * banner_width + 'px'
}

setPoint()
function setPoint() {
  const pointNum = imgBox.children.length - 2

  const frg = document.createDocumentFragment()

  for (let i = 0; i < pointNum; i++) {
    const li = document.createElement('li')

    if (i === 0) li.classList.add('active')

    li.classList.add('point')

    li.dataset.pointIndex = i

    frg.appendChild(li)
  }

  pointBox.appendChild(frg)

  pointBox.style.width = pointNum * (20 + 10) + 'px'
}

autoPlay()
function autoPlay() {

  timerId = setInterval(() => {

    index++

    move(imgBox, { left: -index * banner_width }, () => {
      moveEnd()
    })
  }, 2000)
}

function moveEnd() {
  if (index === imgBox.children.length - 1) {
    index = 1
    imgBox.style.left = -index * banner_width + 'px'
  }

  if (index === 0) {

    index = imgBox.children.length - 2

    imgBox.style.left = - index * banner_width + 'px'
  }

  for (let i = 0; i < pointBox.children.length; i++) {
    pointBox.children[i].classList.remove('active')
  }

  pointBox.children[index - 1].classList.add('active')

  flag = true
}

overOut()
function overOut() {

  banner.addEventListener('mouseover', () => clearInterval(timerId))

  banner.addEventListener('mouseout', () => autoPlay())
}

bindEvent()
function bindEvent() {

  banner.addEventListener('click', e => {

    e = e || window.event

    const target = e.target || e.srcElement

    if (target.className === 'prevBtn') {
      if (flag === false) return

      flag = false

      index--

      move(imgBox, { left: -index * banner_width }, moveEnd)
    }
  
    if (target.className === 'nextBtn') {

      if (flag === false) return

      flag = false

      index++

      move(imgBox, { left: -index * banner_width }, moveEnd)
    }

    if (target.className === 'point') {
      if (flag === false) return

      flag = false

      index = target.dataset.pointIndex - 0 + 1

      move(imgBox, { left: -index * banner_width }, moveEnd)
    }
  })
}

changeTab()
function changeTab() {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') clearInterval(timerId)
    if (document.visibilityState === 'visible') autoPlay()
  })
};



$('.floor > li').click(function () {
   window.scrollTo({
   top: $('.place').eq($(this).index()).offset().top,
   behavior: 'smooth'
  })
})




//.楼层导航
$(window).scroll(() => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  for (let i = 0; i < $('.place').length; i++) {
    if ($('.place').eq(i).offset().top <= scrollTop) {
      $('.floor > li').eq(i).addClass('active').siblings().removeClass('active')
    }
  }
})

$('button').click(() => {
  $('html').animate({
    scrollTop: 0
  }, 2000)
})







/*--------------------*/
const search = document.querySelector('input')
const box = document.querySelector('.import > ul')

// 1. 给 search 绑定表单输入事件
search.oninput = function () {
  // 2. 拿到文本框输入的内容
  const text = this.value

  // 3. 根据 text 关键字请求数据了
  // 3-1. 创建一个 script 标签
  const script = document.createElement('script')
  // 3-2. 手动设置 script 标签的 src 属性
  // 设置 script 标签的原生属性 src
  script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34099,33970,34004,33855,33607,26350,22159&wd=' + text + '&req=2&csor=5&pwd=aiqiyi&cb=fn&_=1623047595324'
  // 3-3. 把这个 script 标签插入到 body 内部
  document.body.appendChild(script)
  // 3-4. script 标签的下场
  // 需要他的目的, 是为了利用 src 发送一个请求, 回来以后会执行 js 代码
  // 请求发送出去以后, 就没有用了
  script.remove()
}

// 4. 需要在全局准备一个 fn 函数
function fn(res) {
  // res 就是后端返回给我的数据
  // 我就根据 res 去渲染页面
  // console.log(res)

  // 通过判断res 内是否有 g 这个数据
  // 来决定我是否渲染
  if (!res.g) {
    // 代码能执行到这里, 表示 res 内没有 g 这个数据
    // 让 ul 隐藏
    box.style.display = 'none'
    // 直接 return
    return
  }

  // 代码能来到这里
  // 说明 res 内的 g 是一个数组
  // 那么就循环数组渲染到 box 内部
  let str = ''
  res.g.forEach(item => {
    str += `<li>${ item.q }</li>`
  })
  box.innerHTML = str

  // 让 box 显示
  box.style.display = 'block'
}